[Feat] BannerCard 컴포넌트 제작 by jwj0620gcu · Pull Request #25 · Leets-Official/LOOPIT-FE

jwj0620gcu · 2026-01-15T05:14:38Z

✨ 주요 변경사항

BannerCard 컴포넌트 구현

📝 작업 상세 내용

BannerCard 컴포넌트 스타일 구현
사용자 UX 고려해 카드만 눌러도 클릭되게 설계
버튼 컴포넌트 재사용

✅ 체크리스트

PR 본문에 Close #번호 추가
불필요한 주석, 디버깅 코드 제거
기능 테스트 및 정상 동작 확인
커밋컨벤션 / 코드컨벤션 준수

📸 스크린샷 (선택)

🔍 기타 참고사항

버튼 클릭 시 이벤트 중복 호출 문제가 있었는데 수정했습니다.

🔗 관련 이슈

Close [Feat] #23 - BannerCard 컴포넌트 제작 #23

github-actions · 2026-01-15T05:15:31Z

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
❌ Prettier: 포맷 필요
❌ Test: 실패
❌ Build: 실패

github-actions · 2026-01-15T05:22:04Z

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 3MB

KyeongJooni

수고하셨습니다! 👍 코멘트 확인해주시면 좋을 것 같아요!

KyeongJooni · 2026-01-15T08:31:34Z

이미지를 자세히보니 워터마크가 보이는 것 같아요
다른 이미지를 사용해야 할 것 같습니다 피그마에 요청하였으니 추후에 수정 부탁드립니다!

저도 보면서 뭐지 했는데 감사합니다.! ㅎ

KyeongJooni · 2026-01-15T08:35:10Z

+          <p className={title()}>
+            중고 전자기기
+            <br />
+            구매하기
+          </p>


중고 전자기기 구매뿐 아니라 판매 등 역시 같은 컴포넌트를 재사용해야 하기 때문에 하드코딩으로 하는 것보다 props를 받아서 사용하는 건 어떨까요?

type BannerCardProps = { title: string; description: string; buttonText?: string; onClick?: () => void; }

이런식으로 타입 정의를 하여 props로 받아서 사용하면 더 좋을 것 같습니다!

옙 props로 받아서 사용하는 게 훨씬 나은 것 같아 수정 완료했습니다.!

KyeongJooni · 2026-01-15T08:39:25Z

+    <div
+      data-testid="banner-card"
+      className={base({ className })}
+      role="button"
+      tabIndex={0}
+      onClick={onClick}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onClick?.();
+        }
+      }}
+      {...props}
+    >


버튼 클릭 시 stopPropagation()으로 부모 이벤트 멈추고, 다시 onClick() 메소드를 호출하고 있는 상황 같은데 바로가기를 눌렀을 때 이동할 것인지 카드 전체를 눌렀을 때 이동할 것인지 고려하고 한쪽은 onClick() 지워주시면 좋을 것 같아요!

뭔가 카드 클릭, 버튼 클릭하여 이동하는 것을 모두 허용하게 하려 해서 약간 꼬였던 것 같습니다! 감사합니다!

KyeongJooni · 2026-01-15T08:39:45Z

+          <Button
+            size="auto"
+            className="w-26"
+            onClick={(e) => {
+              e.stopPropagation();
+              onClick?.();
+            }}
+          >


이 부분에서 stopPropagation을 하여 막고 있는 것 같습니다!

KyeongJooni · 2026-01-15T08:46:38Z

+
+          <Button
+            size="auto"
+            className="w-26"


w-26는 속성값이 없다고 나오는데 오타일까요?

The class w-[104px] can be written as w-26 이렇게 떠서 바꿔봤는데 변경했습니다!

KyeongJooni · 2026-01-15T08:54:00Z

정의된 디자인 토큰에 있는 값들은 디자인 토큰 값을 사용하면 좋을 것 같아요!
그리고 현재 Card와 BannerCard 두 컴포넌트에서 tv() + slots만 사용 중인데, variants 없이 tv() 쓰는 건 오버엔지니어링이라고 개인적으로 생각하고 있어요 개인적인 생각이기 때문에 참고만 해주세요! 😄

KyeongJooni · 2026-01-15T08:54:32Z

+      'flex',
+      'flex-col',
+      'items-start',
+      'gap-[12px]',


index.css에 정의되어있습니다!

수정 완료 했습니다.!

KyeongJooni · 2026-01-15T08:56:24Z

+    'transition-shadow',
+    'hover:shadow-md',
+    'focus-visible:ring-2',
+    'focus-visible:ring-[var(--color-green-700)]',


피그마 디자인에 명세가 되어있는 속성들일까요? 확인부탁드립니다!

어디서 나온 친구인지 몰라 삭제 했습니다!

vercel · 2026-01-15T16:18:19Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
loopit	Ready	Preview, Comment	Jan 15, 2026 4:18pm

github-actions · 2026-01-15T16:19:19Z

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 측정 불가

github-actions · 2026-01-16T07:15:10Z

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
❌ Prettier: 포맷 필요
❌ Test: 실패
❌ Build: 실패

github-actions · 2026-01-16T07:30:27Z

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 3MB

YeBeenChoi

고생 많으셨습니다! 👍👍

YeBeenChoi · 2026-01-16T07:31:00Z

+      'group-hover:w-[307px]',
+      'group-hover:h-[307px]',
+      'group-hover:w-[307px]',
+'group-hover:h-[307px]',


이 부분 중복 선언하신 특별한 이유가 있으신가요?? 없으시다면 정리하는 게 좋을 것 같습니다!

수정하다가 중복으로 들어간 것 같습니다! 당장 수정하겠습니다! 감사합니다!

github-actions · 2026-01-16T07:38:55Z

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 3MB

github-actions · 2026-01-16T07:54:11Z

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 3MB

KyeongJooni

수고하셨습니다!! :)

YeBeenChoi

확인했습니다~ 고생 많으셨어요!

github-actions · 2026-01-16T14:46:03Z

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 3MB

jwj0620gcu added 6 commits January 15, 2026 13:57

chore: Card 컴포넌트 index.ts 추가

2a7ffee

chore: Profile 컴포넌트 index.ts 추가

8474a9d

feat: 톱니바퀴 이미지 추가

664c57b

BannerCard 컴포넌트 구현

4502ec2

test: BannerCard test 추가

75d2ed5

chore: playground 업데이트

fc32a67

github-actions Bot assigned jwj0620gcu Jan 15, 2026

github-actions Bot requested review from KyeongJooni and YeBeenChoi January 15, 2026 05:14

github-actions Bot added the ✨Feature 새로운 기능 label Jan 15, 2026

feat: BannerCard 테스트 실행

5d1c574

KyeongJooni changed the title ~~[feat]BannerCard 컴포넌트 제작~~ [Feat] BannerCard 컴포넌트 제작 Jan 15, 2026

KyeongJooni reviewed Jan 15, 2026

View reviewed changes

Merge branch 'main' into 23-feat/BannerCard-컴포넌트-구현

2e1d043

vercel Bot deployed to Preview January 15, 2026 16:18 View deployment

jwj0620gcu added 6 commits January 16, 2026 16:14

refactor: 카드 전체 클릭이 이동으로 변경

ac19cf4

refactor: 컴포넌트 재사용 고려해 타입 정의 해 props 받기

7e5545b

width 픽셀 수정

e8be079

refactor: 스타일 index.css 토큰 사용 및 수정

da4ce8d

refactor: 플레이그라운드 수정

aeae252

refactor:BannerCard 리뷰 반영 마무리

0421190

vercel Bot deployed to Preview January 16, 2026 07:14 View deployment

jwj0620gcu added 2 commits January 16, 2026 16:16

chore: prettier 적용

52a945d

refactor:테스트 통과 위해 수정

aab5da3

vercel Bot deployed to Preview January 16, 2026 07:30 View deployment

YeBeenChoi reviewed Jan 16, 2026

View reviewed changes

refactor:중복 코드 수정

19c7936

vercel Bot deployed to Preview January 16, 2026 07:38 View deployment

Merge branch 'main' into 23-feat/BannerCard-컴포넌트-구현

642230f

vercel Bot deployed to Preview January 16, 2026 07:53 View deployment

KyeongJooni approved these changes Jan 16, 2026

View reviewed changes

YeBeenChoi approved these changes Jan 16, 2026

View reviewed changes

Merge branch 'main' into 23-feat/BannerCard-컴포넌트-구현

d2ae872

vercel Bot deployed to Preview January 16, 2026 14:45 View deployment

jwj0620gcu merged commit c6a8c33 into main Jan 17, 2026
5 checks passed

Uh oh!

Hidden character warning

Conversation

jwj0620gcu commented Jan 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✨ 주요 변경사항

📝 작업 상세 내용

✅ 체크리스트

📸 스크린샷 (선택)

🔍 기타 참고사항

🔗 관련 이슈

Uh oh!

github-actions Bot commented Jan 15, 2026

PR 검증 결과

Uh oh!

github-actions Bot commented Jan 15, 2026

PR 검증 결과

Uh oh!

KyeongJooni left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

KyeongJooni Jan 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vercel Bot commented Jan 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jan 15, 2026

PR 검증 결과

Uh oh!

github-actions Bot commented Jan 16, 2026

PR 검증 결과

Uh oh!

github-actions Bot commented Jan 16, 2026

PR 검증 결과

Uh oh!

YeBeenChoi left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jan 16, 2026

PR 검증 결과

Uh oh!

github-actions Bot commented Jan 16, 2026

PR 검증 결과

Uh oh!

KyeongJooni left a comment

Choose a reason for hiding this comment

Uh oh!

YeBeenChoi left a comment

jwj0620gcu commented Jan 15, 2026 •

edited

Loading

KyeongJooni Jan 15, 2026 •

edited

Loading

vercel Bot commented Jan 15, 2026 •

edited

Loading